<template>
    <el-form :model="form"
             :rules="rules"
             ref="formRef">
        <el-form-item label="角色名称"
                      prop="roleName"
                      :label-width="formLabelWidth">
            <el-input v-model="form.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色说明"
                      prop="remark"
                      :label-width="formLabelWidth">
            <el-input type="textarea"
                      :rows="3"
                      v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="配置权限"
                      prop="menuIds"
                      :label-width="formLabelWidth">
            <el-tree :data="treedata"
                     show-checkbox
                     node-key="id"
                     :check-strictly="true"
                     :highlight-current="true"
                     :default-checked-keys="showitem"
                     :props="defaultProps"
                     @check="handleCheckChange"
                     ref="tree">
            </el-tree>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth">
            <el-button plain
                       @click="resetForm('formRef')">取消</el-button>
            <el-button type="primary"
                       @click="submitForm('formRef')" :loading="loading">保存</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    name: "",
    props: ["data"],
    data() {
        return {
            loading:false,
            form: {
                roleName: "",
                remark: "",
                permisson: "",
                roleId: "",
                menuIds: ""
            },
            formLabelWidth: "120px",
            rules: {
                roleName: [
                    { required: true, message: "请输入角色名称", trigger: "blur" },
                    { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
                ],
                remark: [
                    {
                        required: true,
                        message: "请填写角色说明，不可超过60字",
                        trigger: "blur"
                    },
                    { min: 4, max: 60, message: "长度在 4 到 60 个字符", trigger: "blur" }
                ],
                menuIds: [{ required: true, message: "必填配置权限", trigger: "blur" }]
            },
            treedata: [],
            defaultProps: {
                children: "children",
                label: "title"
            },
            showitem: []
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        console.log(this.data);
        this.form = this.data;
        this.initData();
        this.showitem = this.data.menuIds.split(',');
        // var arr =this.showitem;
        // this.form.permisson = arr.join(",");
        // console.log(this.form.permisson)
    },
    methods: {
        handleCheckChange(val) {
            var treeKeys = this.$refs.tree.getCheckedKeys();
            var halfKeys = this.$refs.tree.getHalfCheckedKeys()
            let trees = treeKeys.concat(halfKeys)
            console.log('update', treeKeys, halfKeys)
            this.form.menuIds = trees.join(",");
        },
        //初始化树形数据
        initData() {
            this.$service.getMenuLists().then(res => {
                this.treedata = res.data;
            });
        },
        submitForm(formName) {
            this.loading =true;
            this.$refs[formName].validate(valid => {
                let message = this.form;
                if (valid) {
                    let param = {
                        roleName: message.roleName,
                        remark: message.remark,
                        roleId: message.roleId,
                        menuIds: message.menuIds
                    };
                    this.$service.RoleUpdate(param).then(res => {
                        if (res.code == "200") {
                            this.$message({
                                message: "操作成功",
                                type: "success"
                            });
                            this.loading =false;
                            this.initCurrentMenu()
                            this.$refs[formName].resetFields();
                            this.$emit("submit", false);
                        } else {
                            this.$message({
                                message: res.message,
                                type: "warning"
                            });
                        }
                    });
                }
            });
        },
        initCurrentMenu() {
            var currentJsonUser = localStorage.getItem("currentUser");
            var currentUser = JSON.parse(currentJsonUser);
            var userName = currentUser && currentUser.username;
            this.$store.dispatch('getCurrentMenu', userName).then(list => {
                this.menuList = list
            })
        },
        resetForm(formName) {
            this.$emit("submit", false);
            this.$refs[formName].resetFields();
        }
    },
    watch: {}
};
</script>
<style scoped>
</style>
